<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>遍历祖先</title>
		<style>
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
		<script>
			$(function() {
				//children() 方法返回被选元素的所有直接子元素
				$(".ancestors").children().css({
					"color": "red",
					"border": "2px solid red"
				});
				
				//传入参数,表示只获取符合条件的子元素(过滤)
				/* $(".ancestors").children("div.cls1").css({
					"color": "red",
					"border": "2px solid red"
				}); */
				
				//find() 方法可以获取当前元素下的(直接或者间接)子元素(不一定是直接子元素)
				$(".cls1").find("span").css({
					"color": "red",
					"border": "2px solid red"
				});;
			});
		</script>
	</head>
	<body>
		<div class="ancestors">
			<div class="cls1" style="width:500px;">div (曾祖父元素)
				<ul>ul (祖父元素)
					<li>li (父元素)
						<span>span</span>
					</li>
				</ul>
			</div>

			<div class="cls2" style="width:500px;">div (祖父元素)
				<p>p (父元素)
					<span>span</span>
				</p>
			</div>
		</div>
	</body>
</html>
